<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台布局小例子</title>
    <style>
        .body{
            margin:0;
            background-color:#dddddd;
        }
        .float-left{
            float:left;
        }
        .float-right{
            float:right;
        }
        .pg-header{
            height:50px;
            background-color:#2459a2;   /*后台一般是全局，不像前台一样需要居中*/
            color:white;
        }
        .pg-content .menu{
            /*width:30%;
            min-width:300px;    默认占30%宽度，左右拉缩最小宽度为300像素，但后台一般不用这种方式*/
            position:fixed;
            top:50px;
            left:0;
            bottom:0;
            width:250px;
            background-color:#FFdd66;
        }
        .pg-content .content{
            position:fixed;
            top:50px;
            left:250px;
            right:0;
            bottom:0;
            background-color:#FF3654;
            overflow:auto;   /*出现滚动条*/
        }
    </style>
</head>
<body class="body">
    <!--页面顶端部分-->
    <div class="pg-header"></div>
    <!--页面中间内容部分-->
    <div class="pg-content">
        <div class="menu float-left">left</div>
        <div class="content float-right">right


        </div>
    </div>
    <!--页面底部部分-->
    <div class="pg-footer"></div>
</body>
</html>